<div id="wizard" class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" aria-label="Close" data-dismiss="modal">
        <span aria-hidden="true">×</span>
      </button>
      <h4 class="modal-title" data-i18n="dialog.create_cluster_wizard.title"></h4>
    </div>
    <div class="modal-body wizard-body">
      <div class="wizard-steps-box">
        <div class="wizard-steps-nav col-xs-3">
          <ul class="wizard-step-nav-item nav nav-pills nav-stacked">
            <% _.each(panesTitles, function(paneTitle, step) { %>
              <li role="wizard-step" class="wizard-step" data-pane="<%= step %>">
                <a><%- i18n(paneTitle) %></a>
              </li>
            <% }) %>
          </ul>
        </div>

        <div class="pane-content col-xs-9"></div>
        <div class="clearfix"></div>
      </div>
    </div>

    <div class="modal-footer wizard-footer">
      <button class="btn btn-default pull-left" data-dismiss="modal" data-i18n="common.cancel_button"></button>
      <button class="btn btn-default prev-pane-btn">
        <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
        <span data-i18n="dialog.create_cluster_wizard.prev"></span>
      </button>
      <button class="btn btn-default btn-success next-pane-btn">
        <span data-i18n="dialog.create_cluster_wizard.next"></span>
        <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
      </button>
      <button class="btn btn-default btn-success finish-btn" data-i18n="dialog.create_cluster_wizard.create"></button>
    </div>
  </div>
</div>
